<template>
	<!-- 我的 -->
	<view class="content">
		<view class="bjtupian">
			<view class="top">
				<view class="tupiao_1">
					<image src="../../static/gerzhox/qipaosd.png" class="img_1" @tap="liavr"></image>
				</view>
				<view class="sehzi">
					<image src="../../static/shez.png" class="img_2"></image>
				</view>
			</view>
			<view class="txiang">
				<view class="rxiang">
					<image :src="tup == '' ? imgsa : tup " class="img_3"></image>
				</view>
				<view class="lijidr">
					<block v-if="name == ''">
						<text style="font-size: 38rpx;" @tap="inner">立即登入</text>
					</block>
					<block v-else>
						<text style="font-size: 38rpx;">{{name}}</text>
					</block>
				</view>
			</view>
			<view class="huaiyuan1">
				<view class="huaiyuan">
					<view class="pohyuan">
						<view class="pohyuan_1">
							<image src="../../static/gerzhox/zunags.png" class="img_4"></image>
							<text style="display: inline-block; margin-left: 20rpx;margin-top: 15rpx; color: #F8D682;">普通会员</text>
						</view>
						<view class="pohyuan_2">
							<text style="display: inline-block; width: 100%; font-size: 40rpx; margin-top: 20rpx; margin-left: 18rpx; color: #F8D682;">vip权益</text>
							<text style="display: inline-block; width: 100%;font-size: 27rpx;margin-top: 10rpx;  margin-left: 18rpx;color: #F8D682;" >请联系管理员开通会员</text>
						</view>
					</view>
					<view class="tupian_4">
						<image src="../../static/gerzhox/vip-card-bg.png" class="img_5"></image>
					</view>
				</view>
				<view class="cover-container">
					<view class="drop-down" :style="[{ transform: coverTransform, transition: coverTransition }]" @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
						<view class="tupian_5">
							<image src="../../static/gerzhox/arc.png" class="img_6"></image>
						</view>
						<view class="box3">
							<view v-for="(item,index) in goodsState" :key="index">
								<view class="box3-state" @click="goods(item,index)">
									<image :src="item.url" mode="widthFix" style="width: 60rpx; margin: 10rpx 30rpx 0rpx;">
										<view style="font-size: 27rpx; text-align: center;">{{item.otesx}}</view>
									</image>
								</view>
							</view>
						</view>
						<view class="history-section">
							<view v-if="accessToken != ''">
								<view class="sec-header">
									<image src="../../static/gerzhox/lis.png" class="iconfont"></image>
									<text style="margin-left: 20rpx;">浏览历史</text>
								</view>
								<scroll-view scroll-x="true" class="h-list" @scroll="scroll" scroll-left="100%" @scrolltolower="scrolltolower">
									<image @longtap="lober(item)" @click="jieke(item,index)" v-for="(item,index) in History" :src="item.spuImg" :key='index'></image>
								</scroll-view>
							</view>
							<view class="mix-list-cell" v-for="(item,index) in arr" :key='index' @click="demo(item,index)">
								<view class="atrule">
									<image :src="item.icon" class='iconfont':style="'color:'+item.color+';'"></image>
									<!-- <image src="../../static/gerzhox/arc.png"></image> -->
								</view>
								<view class="content-text">
									<text>{{item.text}}</text>
									<view class="icon"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				name:'',
				tup:'',
				// spuImg:"",
				History:"",
				imgsa:"../../static/gerzhox/missing-face.png",
				goodsState: [{
							url: "../../static/gerzhox/order.png",
							otesx: "全部订单",
							status: 0,
							id: 0
						},
						{
							url: "../../static/gerzhox/To_be_paid.png",
							otesx: "待付款",
							status: 10,
							id: 1
						},
						{
							url: "../../static/gerzhox/To_Receiving.png",
							otesx: "待收货",
							status: 30,
							id: 3
						},
						{
							url: "../../static/gerzhox/refund.png",
							otesx: "退款/售后",
							status: 50,
							id: 5
						}
					],
				arr: [{
					
					icon: '../../static/gerzhox/dizli.png',
					text: '地址管理',
					color: '#5FCDA2'
				}, {
					icon: '../../static/gerzhox/wdsc.png',
					text: '我的收藏',
					color: '#54B4EF'
				}, {
					icon: '../../static/gerzhox/zxkf.png',
					text: '在线客服',
					color: '#E38381'
				}, {
					icon: '../../static/gerzhox/grzl.png',
					text: '个人资料',
					color: '#EE82EE',
				}, {
					icon: '../../static/gerzhox/xxiai.png',
					text: '关于',
					color: '#EE883B',
				}, {
					icon: '../../static/gerzhox/tc.png',
					text: '退出登录',
					color: '#E17A78'
				}],
			}
			
		},
		onShow() { 
				this.tup=uni.getStorageSync("avatarUrl"); 
				uni.getStorage({
					key: "nickname",
					success: (res) => {
						this.name = res.data
					},
					fail: (res) => {
						uni.showModal({
							title: "登录提示",
							content: "你尚未登录，是否登录？",
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: "../long/long"
									})
								}
							}
						})
					}
				})
		},
		onLoad() {
			this.history()
		},
		
		methods: {
			scroll(event) {
				//距离么个边界距离
				console.log(event.detail)
			},
			//滚动到底部/右边触发
			scrolltolower() {
				console.log(1111);
			},
			scrolltoupper() {
				console.log(2222);
			},
			
			//立即登入
			inner() {
				uni.navigateTo({
					url: '/pages/long/long'
				});
			},
			liavr() {
				uni.navigateTo({
					url: '/pages/advise/advise'
				})
			},
			/* 下拉弹框 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 100) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			// 历史记录
			history() {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=footprint&_mt=getAllFootprint',
					header: {
						"accessToken": uni.getStorageSync('accessToken'),
					},
					success: (res) => {
						// console.log(res)
						getApp().globalData.methods = res.data.data;
						this.History = getApp().globalData.methods;
					}
				})
			},
			// 历史记录删除
			lober(item) {
				console.log(this.item)
					let _this = this
					uni.showModal({
						title: '删除提示',
						content: '您确定要删除此足迹吗？',
						success: function(res) {
							// alert(4564654456)
							if (res.confirm) {
								uni.request({
									url: `http://192.168.1.54:8081/m.api`,
									method: 'GET',
									data:{
										"_gp":"footprint",
										"_mt":"deleteFootprint",
										"footprintId":item.id 
									},
									header: {
										'accesstoken': uni.getStorageSync('accessToken')
									},
									success: function(res) {
										console.log(res)
										if (res.data.errmsg == '成功') {
											_this.history()
											uni.showToast({
												title: '删除成功',
											})
										}
									}
								})
							}
						}
					})
				},
				
				// 图片跳转历史记录
			jieke(item, index) {
				// console.log(item, index)
				uni.navigateTo({
					url: '/pages/details/producte?oid=' + item.spuId
				});
			},
			
			demo(item,index) {
				console.log(index)
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pages/address/address'
						});
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/product/favorite'
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/Updatename/Updatename'
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/about/about'
						});
						break
					case 5:
						var that = this
						uni.request({
							url: 'http://192.168.1.54:8081/m.api?_gp=user&_mt=logout&ACCESSTOKEN= ',
							header: {
								'accesstoken': uni.getStorageSync('accessToken')
							},
							success: function(res) {
								console.log(res)
								uni.showModal({
									content: '确定要退出登录么',
									success: (e) => {
										try {
											that.name = ''
											that.tup = ''
											uni.removeStorageSync('nickname')
											uni.removeStorageSync('accessToken')
											uni.removeStorageSync('avatarUrl')
											uni.navigateBack();
										} catch (e) {
											
										}
									},
								})
							}
						})
						break;
				}
			},
			goods(item, index) {
				console.log(item,index)
				uni.navigateTo({
					url:'/pages/orders/orders?statu=' + item.status + '&goid=' + item.id
				});
			},
		}
	}
</script>

<style scoped="scoped">
	/* 顶部 */
	.content {display: flex;width: 100%; height: 1103rpx;background-color: #F5F5F5;}
	.bjtupian{ width: 100%;height: 520rpx; background: url(../../static/gerzhox/user-bg.jpg)0rpx 0rpx no-repeat;background-size: 100% 500rpx;}
	.top{width: 100%; height: 100rpx;  display: flex;}
	.tupiao_1{width: 90rpx;height: 90rpx; text-align: center; margin-left: 550rpx;}
	.img_1{width: 75rpx; height: 75rpx;margin-top: 5rpx;}
	.sehzi{width: 90rpx; height: 90rpx; text-align: center;margin-left: 18rpx;}
	.img_2{width: 60rpx; height: 60rpx; margin-top: 15rpx;}
	.txiang{width: 100%; height: 155rpx;display: flex;}
	.rxiang{width: 150rpx; height: 150rpx; text-align: center; margin-left: 30rpx;}
	.img_3{width: 132rpx; height: 132rpx; border-radius: 50%;}
	.lijidr{
		width: 200rpx; height: 100rpx; text-align: center;line-height: 100rpx;margin-left: 10rpx;margin-top: 25rpx;
	}
	.huaiyuan1{width: 100%; height: auto;position: relative;}
	.huaiyuan{width: 690rpx; height: 240rpx; background-color: #423F37; margin: auto; display: flex; margin-top: 6rpx;}
	.pohyuan{width: 300rpx; height: 240rpx; }
	.tupian_4{width: 390rpx; height: 240rpx;}
	.img_5{width: 390rpx; height: 240rpx;}
	.pohyuan_1{width: 100%; height: 80rpx; display: flex;}
	.img_4{width: 45rpx; height: 45rpx; margin-top: 15rpx;margin-left: 20rpx;}
	.pohyuan_2{width: 100%; height: 158rpx;}
	/* 下拉弹框 */
	.cover-container{width: 100%; position: absolute;  top: 75px;}
	.drop-down {position: relative;transition: transform 2s; width: 100%; height: 500rpx; background-color: #F5F5F5;}
	.tupian_5{width: 750rpx;height: 70rpx;position: absolute;top: -50rpx;}
	.img_6{width:750rpx; height: 70rpx;}
	.box3 {width: 674rpx;height: 120rpx;margin-bottom: 20rpx; padding: 20rpx; background-color: #FFFFFF; border-radius: 10rpx; display: flex; justify-content: space-between; margin-left: 20rpx;}
	.box3-state {width: 120rpx; height: 120rpx; background-color: #FFFFFF;}
	.box3-state:hover {background-color: #F5F5F5;}
	.drop-down {position: relative;transition: transform 2s;}
	.order-section{padding: 28rpx 0;background-color: #fff;
	display: flex;justify-content: space-around;border-radius: 15rpx;align-content: center;}
	.order-item{width: 120rpx;height: 120rpx;font-size: 24rpx;color: #303133;text-align: center;padding: 0 30rpx;}
	.order-img{color: #fa436a;margin-bottom: 16px;}
	.history-section{padding: 30upx 0 0;margin-top: 20upx;background: #fff;border-radius:10rpx;overflow: hidden;}
	.sec-header{display:flex;align-items: center;font-size: 30rpx;line-height: 40rpx;width: 78%;margin: auto;}
	.icon-dizhiguanli{font-size: 40rpx;color: #5eba8f;margin-right: 16rpx;line-height: 40rpx;}
	.iconfont{width: 50rpx; height: 50rpx;}
	.h-list{white-space: nowrap;padding: 10rpx;}
	.h-list image{display:inline-block; width: 160rpx;height: 160rpx;margin-right: 20rpx;border-radius: 10rpx;}
	
	
	.mix-list-cell{width: 90%;height: 80rpx;padding: 10rpx 20rpx;border-bottom: 1px solid #f5f5f5;line-height: 80rpx;margin: auto;}
	.atrule{width: 60rpx;float: left;height: 60rpx;line-height: 82rpx;}
	.content-text{font-size: 26rpx;color: #303133; position: relative;}
	.icon-arrow{float: right;}
	.icon-liulanlishi{margin-left: -30rpx;font-size: 50rpx;color: #008000;}
	.icon {width: 25rpx;height: 25rpx;margin: 37.5rpx;border-top: 2px solid #606266;border-right: 2px solid #606266;transform: rotate(45deg);position: absolute; top: 0rpx;left: 600rpx;}
</style>


	